<template>
<!-- 音乐榜单 -->
  <div class="container">
    <div class="recommend">
      <div class="recommend_title">音乐榜单</div>
      <!-- <router-link tag="div" :to="{name:'morelist',params:{titles:title}}" class="recommend_more">更多</router-link> -->
    </div>
    <ul>
      <router-link tag="li" to="/home/hotlist">热歌榜</router-link>
      <router-link tag="li" to="/home/newslist">新歌榜</router-link>
      <router-link tag="li" to="/home/kinglist">King榜</router-link>
    </ul>
    <!-- 获取Music_List视图，避免重新渲染 -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name:'musiclistnav',
    data(){
      return{

      }
    },
    // props:{
    //   title:{
    //     type:String,
    //     default:"音乐榜单" 
    //   }
    // }
  }
</script>

<style scoped>

.active{
  color: red
}

.container{
  width: 100%;
  height: 500px;
  margin-top: 10px;
  background-color: white;
  margin-bottom: 10px
}

.recommend{
  width: 100%;
  height: 70px;
  display: flex
}

.recommend_title{
  padding: 26px;
  font-size: 20px;
  flex: 1
}

.recommend_more{
  float: right;
  padding: 30px 30px 0 0
}

ul{
  display: flex;
}

ul li{
  list-style: none;
  height: 55px;
  line-height: 55px;
  flex: 1;
  text-align: center
}
</style>